<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .box1{
            width:800px;
            height:800px;
            background-color: aqua;
            overflow: hidden;
        }
        .box1 div{
            width:100px;
            height:100px;
            margin-bottom:100px;
        }
/* 第一遍理解记忆：2023-1-27 */
/*1、概念：动画和过渡类似，都是可以实现一些动态效果；不同的是过渡需要在某个属性发生变化时才会触发，
动画可以自动触发动态效果；设置动画效果，必须设置一个关键帧
2、关键帧：设置了动画执行的每一个步骤*/
        @keyframes test{
            /*from表示动画的开始位置，也可以使用0%*/
            from{
                margin-left:0;
                background-color: deeppink;
            }
            /*to表示动画的结束位置，也可以使用100%*/
            to{
                margin-left:700px;
                background-color: dodgerblue;
            }
        }
        .box2{
            background-color: chartreuse;
            /* transition: 2s; */
            /*当前元素关键帧的名字*/
            animation-name: test;
            /*动画的执行时间*/
            animation-duration: 4s;
            /*动画延时*/
            animation-delay: 2s;
            /*动画的执行方式*/
            animation-timing-function: ease-in-out;
            /*动画执行次数：次数、infinite无限执行*/
            animation-iteration-count: 3;
            /*动画运行方向：
            默认值normal从from向to运行，每次都是这样
            revserse从to向from运行，每次都是这样
            alternate从from到to运行，重复执行时反向返回*/
            animation-direction: normal;
            /*动画播放状态：running默认值，动画执行、paused动画暂停*/
            /* animation-play-state: paused; */
            /*动画填充模式
            可选值：
            none默认值，动画执行完毕，元素回到初始位置
            forwards动画执行完毕，元素停止到结束位置
            backwards动画延时等待时，元素处于开始位置
            both结合了forwards和backwards两种特点*/
            animation-fill-mode: none;
            animation: test 2 1s alternate;
        }

        .box1:hover div{
            width:200px;
            height:200px;
            background-color: darkorange;
            margin-left:700px;
        }
        
           
        
        </style>
</head>
<body> 
    <div class="box1">
        <div class="box2"></div>
        <!-- <div class="box3"></div> -->
    </div>
</body>
</html>